<template>
  <div>
    <Breadcrumb :style="{ margin: '15px 0' }">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>订单管理</BreadcrumbItem>
      <BreadcrumbItem>售后订单</BreadcrumbItem>
    </Breadcrumb>
    <div class="page-refresh" @click="reloadPage">
      <Icon size="30" color="#9a9a9a" type="ios-refresh" /> 刷新
    </div>
    <Content class="layer-content">
      <Form inline>
        <FormItem>
          <Input style="width: 500px" v-model="keywords" search enter-button placeholder="请输入关键字" @on-search="searchGet" @submit.native.prevent/>
        </FormItem>
        <FormItem>
          <Button @click="reset">重置</Button>
        </FormItem>
      </Form>
      <Table border :columns="columns" :data="dataGrid"></Table>
      <HigPager v-model="query" :total="pageTotal" :init="init"></HigPager>
    </Content>

    <Modal :footer-hide="true" v-model="showDetail" title="售后订单详情" width="70%">
      <div class="layer_top">
        <div class="name-area"><span class="names">商品名称：</span>{{dataVo.goodsName}}</div>
        <div class="name-area"><span class="names">订单数量：</span>{{dataVo.goodsQty+dataVo.skuUom}}</div>
        <div class="name-area"><span class="names">退货数量：</span>{{dataVo.refundQty+dataVo.skuUom}}</div>
        <div class="name-area"><span class="names">商品SKU: </span>{{dataVo.skuId}}</div>
        <div class="name-area"><span class="names">商品单价：</span>￥{{dataVo.salePrice}}</div>
        <div class="name-area"><span class="names">退货金额：</span>￥{{dataVo.refundAmt}}</div>
      </div>
      <div class="notes">
        <div class="names">申请原因：</div>
        <p>{{dataVo.postSaleNotes || '无'}}</p>
      </div>
      <Divider>审核内容</Divider>
      <Form>
        <FormItem>
          <Input v-model="formData.auditNotes" type="textarea" :disabled="!canAuth" :rows="4" placeholder="审核说明"></Input>
        </FormItem>
        <FormItem v-if="canAuth">
          <Button type="primary" @click="Accept">通过</Button>
          <Button @click="Cancel">驳回</Button>
        </FormItem>
      </Form>
      <Divider>申请附件</Divider>
      <div class="fileList">
        <span v-for="(item,id) in postSaleFiles" :key="id">
          <img :src="item.fileUrl" alt="" @click="preview(item.fileUrl)">
        </span>
      </div>
    </Modal>
  </div>
</template>
<script>
import defaultGoodsImg  from "@/images/goods.png"
export default {
  name: "purchase",
  data() {
    return {
      keywords: null,
      authNotes: null,
      goodsItem:{},
      showDetail: false,
      canAuth: false,
      dataGrid:[],
      dataVo: {},
      formData: {
        auditNotes: null
      },
      postSaleFiles: [],
      pageTotal:0,
      query: {
        pageIndex: 1,
        pageSize: 15,
        equal:{
          shopId: this.$store.getShop('shopId')
        },
        queryIn:{
          field: 'post_sale_type',
          values: [0,1]
        }
      },
      columns: [
        {
          title: "商品图片",
          key: "goodsImg",
          width: 100,
          render: (h, params) => {
            return h("div", [
              h("img",{
                  attrs: {src: params.row.goodsImg || defaultGoodsImg},
                  style: {width: "50px",height: "46px"},
                },
              ),
            ])
          },
        },
        {
          title: "商品名称",
          key: "goodsName",
          minWidth: 300
        },
        {
          title: "售后类型",
          key: "postSaleTypeText",
          width: 100,
        },
        {
          title: "订单数量",
          key: "goodsQty",
          sortable: true,
          width: 120,
        },
        {
          title: "退货数量",
          key: "refundQty",
          sortable: true,
          width: 120,
        },
        {
          title: "退货金额",
          key: "refundAmt",
          sortable: true,
          width: 120,
          render: (h, params) => {
            return h("div", [
              h("a", { style: { fontSize: "12px", color: "gray" } }, "￥"),
              h("span", params.row.refundAmt.toFixed(2)),
            ])
          },
        },
        {
          title: "扣除费用",
          key: "cutpayAmt",
          sortable: true,
          width: 120,
          render: (h, params) => {
            return h("div", [
              h("a", { style: { fontSize: "12px", color: "gray" } }, "￥"),
              h("span", params.row.cutpayAmt.toFixed(2)),
            ])
          },
        },
        {
          title: "实退金额",
          key: "actualRefundAmt",
          sortable: true,
          width: 120,
          render: (h, params) => {
            return h("div", [
              h("a", { style: { fontSize: "12px", color: "gray" } }, "￥"),
              h("span", params.row.actualRefundAmt.toFixed(2)),
            ])
          },
        },
        {
          title: "售后状态",
          key: "postSaleStatus",
          width: 110,
          render: (h, params) => {
            return h("Tag", {
              props: {
                color: this.tagStyle(params.row.postSaleStatus)
              }
            }, params.row.postSaleStatusText);
          },
        },
        {
          title: "退款状态",
          key: "refundStatus",
          width: 110,
          render: (h, params) => {
            return h("Tag", {
              props: {
                color: this.tagRefundStyle(params.row.refundStatus)
              }
            }, params.row.refundStatusText);
          },
        },
        {
          title: "提交时间",
          key: "postTime",
          sortable: true,
          width: 130,
          render: (h, params) => {
            return h("div", [
              h("span",this.$date(params.row.postTime,'yyyy-MM-dd')),
            ]);
          },
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          fixed: "right",
          render: (h, params) => {
            return h("Dropdown",{props: {transfer:true,trigger:'click'}},
              [
                h("a",[h("a","售后菜单"),h("Icon",{props: {type: "ios-arrow-down"}})]),
                h("DropdownMenu",{slot: "list"},
                  [
                    h("DropdownItem",{nativeOn:{click:()=>{this.Detail(params.row)}}},"详情"),
                    h("DropdownItem",{nativeOn:{click:()=>{this.Auth(params.row)}},props:{disabled: params.row.auditStatus !== 0}},"审核"),
                    h("DropdownItem",{nativeOn:{click:()=>{this.Refund(params.row)}},props:{
                      disabled: params.row.auditStatus !== 1 || params.row.postSaleStatus === 3 || params.row.refundStatus === 1 || params.row.refundStatus === 2,
                      divided:true}},"退款")
                  ]
                ),
              ]
            )
          }
        }
      ]
    }
  },
  created() {
    
  },
  components:{
    
  },
  mounted() {
    this.init()
  },
  methods: {
    reloadPage() {
      this.query.pageIndex = 1
      this.init()
    },
    Detail(item) {
      this.canAuth = false
      this.dataVo = item
      this.formData.auditNotes = item.auditNotes
      this.showDetail = true
      this.getFiles(item.postSaleId)
    },
    Auth(item) {
      if(item.auditStatus !== 0) {
        return false
      }
      this.canAuth = true
      this.dataVo = item
      this.showDetail = true
      this.getFiles(item.postSaleId)
    },
    Accept() {
      this.formData.postSaleId = this.dataVo.postSaleId
      this.formData.auditStatus = 1
      this.$Modal.confirm({
        title: '温馨提示',
        content: `确定通过审核吗？`,
        onOk: () => {
          this.Audit()
        }
      })
    },
    Cancel() {
      this.formData.postSaleId = this.dataVo.postSaleId
      this.formData.auditStatus = 2
      this.$Modal.confirm({
        title: '温馨提示',
        content: `确定驳回吗？`,
        onOk: () => {
          this.Audit()
        }
      })
    },
    Audit() {
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/mall-api/post/sale/audit",
        data: {
          pojo: this.formData
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success('操作成功')
            this.init()
            this.showDetail = false
          } else {
            this.$Message.error(res.data.msg)
          }
        },
      }).post()
    },
    Refund(item) {
      if(item.auditStatus !== 1 || item.postSaleStatus === 3 || item.refundStatus === 1 || item.refundStatus === 1) {
        return false
      }
      this.$Modal.confirm({
        title: '温馨提示',
        content: `确定退款吗？`,
        onOk: () => {
          new this.$rest({
            gateway: 'agrobiz',
            service: "agrobiz-order",
            url: "/v1.0/mall-api/post/sale/refund",
            data: {
              pojo: item.postSaleId
            },
            action: (res) => {
              if (res.data.code === 20000) {
                this.$Message.success('退款成功')
                this.init()
              } else {
                this.$Message.error(res.data.msg)
              }
            },
          }).post()
        }
      })
    },
    //搜索
    searchGet() {
      let sqlLike = {
        fields: ["shop_order_id","goods_name","org_name","sku_id","audit_notes"],
        keyword: this.keywords,
      };
      this.query.sqlLike = sqlLike;
      this.init();
    },
    //重置
    reset() {
      delete this.query.sqlLike;
      this.keywords = null;
      this.query.pageIndex = 1
      this.init();
    },
    init() {
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/view/mall/post/sale/page",
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data.list;
            data.forEach(element => {
              element.postSaleStatusText = this.postSaleEnum(element.postSaleStatus)
              element.postSaleTypeText = this.postSaleTypeEnum(element.postSaleType)
              if(element.postSaleStatus === 0 || element.postSaleStatus === 4) {
                element.refundStatus = -1
                element.refundStatusText = "无"
              } else {
                element.refundStatusText = this.refundStatusEnum(element.refundStatus)
              }
            });
            this.dataGrid = data;
            this.pageTotal = res.data.data.count
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).get()
    },
    getFiles(id) {
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/mall/post/sale/file/page",
        query: {
          equal: {
            postSaleId: id
          },
          pageIndex: 1,
          pageSize: 21
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.postSaleFiles = res.data.data.list
          }
        },
      }).get()
    },
    preview(url) {
      this.$Modal.confirm({
        title: '图片预览',
        closable: true,
        scrollable: true,
        width: '50%',
        content: `<div><img src="${url}" alt="" style="width:100%"></div>`,
      })
    },
    tagStyle(status) {
      switch(status) {
        case 0:
          return 'orange'
        case 1:
          return 'success'
        case 2:
          return 'volcano'
        case 4:
          return 'warning'
        default:
          return 'magenta'
      }
    },
    tagRefundStyle(status) {
      switch(status) {
        case 0:
          return 'orange'
        case 1:
          return 'warning'
        case 2:
          return 'success'
        default:
          return 'default'
      }
    },
    postSaleEnum(id) {
      switch(id) {
        case 0:
          return '待审核'
        case 1:
        case 2:
          return '已通过'
        case 3:
          return '已结束'
        case 4:
          return '已驳回'
      }
    },
    refundStatusEnum(id) {
      switch(id) {
        case 0:
          return '待退款'
        case 1:
          return '退款中'
        case 2:
          return '已退款'
        case 3:
          return '退款失败'
      }
    },
    postSaleTypeEnum(id) {
      switch(id) {
        case 0:
          return '退货'
        case 1:
          return '换货'
        case 2:
          return '退款'
      }
    }
  }
}
</script>
<style lang="less" scoped>
.layer_top {
  display: flex; flex-wrap: wrap;
}
.name-area {
  padding: 3px 0; width: 33%;
}
.names {
  width: 100px; font-weight: 800; display: inline-block;
}
.notes {
  margin: 20px 0;
}
.notes p {
  line-height: 23px; padding: 10px; border: 1px solid #dedede; border-radius: 5px; margin: 10px 0; background-color: #fafafa;
  min-height: 80px;
}
.fileList {
  margin-top: 40px; text-align: left;
}
.fileList span {
  display: inline-block; width: 20%; text-align: center; vertical-align: top; margin: 8px;
}
.fileList span img {
  height: 200px;
}
</style>